<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="./css/demo-common.css">
		<link rel="stylesheet" href="./css/atom-one-light.css">
		<script src="./js/jquery-2.2.3.min.js"></script>
		<script src="./js/highlight.pack.js"></script>
		<script src="../js/sideNav.js"></script>
		<script src="../js/tab.js"></script>
		<script src="../js/select.js"></script>
		<script src="../js/dropdown.js"></script>
		<script src="../js/pagination.js"></script>
	</head>
	<body class="app">
		<div class="header">
			<div class="logo">Admin<b>Box</b></div>
			<div class="user">
				<i class="fa fa-user-o user-icon"></i>
				<div class="dropdown">
					<div class="username" data-init="dropdown">
						Admin
					</div>
					<div class="dropdown-menu">
					    <a>修改密码</a>
					    <a>退出</a>
					</div>
				</div>
			</div>
		</div>
		<div class="side-nav">
			<ul>
				<li>
					<a href="#" class="nav-item">
						<i class="fa fa-bank nav-icon"></i>HTML
					</a>
				</li>
				<li>
					<a class="nav-head active">
						<i class="fa fa-envelope nav-icon"></i>CSS
					</a>
					<ul class="sub-nav active">
						<li><a href="#" class="nav-item lv2">二级导航1</a></li>
						<li><a href="#" class="nav-item lv2 active">二级导航2</a></li>
						<li><a href="#" class="nav-item lv2">二级导航3</a></li>
					</ul>
				</li>
				<li>
					<a href="#" class="nav-item">
						<i class="fa fa-search nav-icon"></i>JAVASCRIPT
					</a>
				</li>
				<li>
					<a href="#" class="nav-item">
						<i class="fa fa-refresh nav-icon"></i>LESS
					</a>
				</li>
			</ul>
		</div>
		<div class="main">
			<div class="section row">
				<div class="col-6" style="padding-right: 10px;">
					<div class="panel panel-warning" style="height: 110px">
						<b>Note:</b> Dialogs use the HTML &lt;dialog&gt; element, which currently has very limited cross-browser support. To ensure support across all modern browsers, please consider using a polyfill or creating your own.
					</div>
				</div>
				<div class="col-6" style="padding-left: 10px;">
					<div class="panel" style="height: 110px">
						<div class="panel-head">
							<span class="panel-title">Title</span>
						</div>
						<div class="panel-body">Here is some content...</div>
					</div>
				</div>
			</div>
			<div class="section">
				<div class="panel panel-tab">
					<ul class="tabs tabs-card">
					    <li class="tab active">
					        <a href="#d1">Tab1</a>
					    </li>
					    <li class="tab">
					        <a href="#d2"><i class="fa fa-apple"></i>Tab2</a>
					    </li>
					    <li class="tab">
					        <a href="#d3">Tab3</a>
					    </li>
					</ul>
					<div class="tab-content bordered" style="height: 120px">
					    <div class="tab-pane" id="d1">NASA.gov brings you the latest news, images and videos from America's space agency, pioneering the future in space exploration.NASA.gov brings you the latest news, images and videos from America's space agency, pioneering the future in space exploration.NASA.gov brings you the latest news, images and videos from America's space agency, pioneering the future in space exploration.</div>
					    <div class="tab-pane" id="d2">content2</div>
					    <div class="tab-pane" id="d3">content3</div>
					</div>
				</div>
			</div>
			<div class="toolbar">
				<div class="input-wrapper">
					<input type="text" class="round shadow">
					<i class="fa fa-search input-search-icon"></i>
				</div>
				&nbsp;
				<select id="select" class="round shadow" style="width: 160px;">
					<option value="1">Accounting</option>
					<option value="2">HR</option>
					<option value="3">R&D</option>
				</select>
				<button class="btn btn-medium btn-success fr round shadow">+ Add new Employee</button>
			</div>
			<div class="section">
				<div class="panel" style="padding-top: 0">
					<table class="table table-stripped">
					  <thead class="dark">
					    <tr>
					      <th>Name</th>
					      <th>Age</th>
					      <th>Address</th>
					    </tr>
					  </thead>
					  <tbody>
					    <tr>
					      <td>Jay</td>
					      <td>23</td>
					      <td>New York No. 1 Lake Park</td>
					    </tr>
					    <tr>
					      <td>Mike</td>
					      <td>43</td>
					      <td>London No. 1 Lake Park</td>
					    </tr>
					    <tr>
					      <td>Larry</td>
					      <td>18</td>
					      <td>Sidney No. 1 Lake Park</td>
					    </tr>
					    <tr>
					      <td>Larry</td>
					      <td>18</td>
					      <td>Sidney No. 1 Lake Park</td>
					    </tr>
					    <tr>
					      <td>Larry</td>
					      <td>18</td>
					      <td>Sidney No. 1 Lake Park</td>
					    </tr>
					  </tbody>
					</table>
					<div class="panel-foot">
						<div id="pagination"></div>
					</div>
				</div>
			</div>

		</div>

		<script>
		$(document).ready(function() {
			$('pre code').each(function(i, block) {
				hljs.highlightBlock(block);
			});
			$('#select').select();
			$('#pagination').pagination({
				total: 100
			});
		});
		</script>
	</body>
</html>